<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>echarts</title>
    <!-- element.css -->
    <link rel="stylesheet" href="/static/element-ui/element-ui.css">
    <!-- vue -->
    <script src="/static/vue/vue-2.7.10.js"></script>
    <!-- element.js -->
    <script src="/static/element-ui/element-ui.js"></script>
    <!-- echarts -->
    <script type="text/javascript" src="/static/echarts/echarts-5.3.3.js"></script>

</head>
<body>
<div id="app">
    <div ref="chart" style="width:50%;height:376px"></div>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                chart: {},
            }
        },
        created() {
        },
        mounted() {
            this.getEchartsData()
        },
        methods: {
            getEchartsData() {
                const chart = this.$refs.chart
                if (!!chart) {
                    const myChart = echarts.init(chart)
                    const option = { legend: {},
                        tooltip: {},
                        dataset: {
                            source: [

                                ['订单', 43.3, 85.8],
                                ['订单1', 83.1, 73.4],
                                ['订单2', 86.4, 65.2],
                                ['订单3', 72.4, 53.9],
                                ['订单4', 82.4, 53.9],
                                ['订单5', 42.4, 53.9],
                                ['订单6', 72.4, 53.9],
                                ['订单7', 72.4, 53.9]
                            ]
                        },
                        xAxis: { type: 'category' },
                        yAxis: {},
                        series: [ { type: 'bar' }, { type: 'bar' }]}
                    myChart.setOption(option)
                    window.addEventListener("resize", function() {
                        console.log('resize')
                        myChart.resize()
                    })
                }
                this.$on('hook:destroyed',()=>{
                    window.removeEventListener("resize", function() {
                        myChart.resize();
                    });
                })
            },
        },
        watch: {},
    })
</script>


</body>
</html>
